<template>
  <view class="min-vh-100">
    <StatusBar></StatusBar>
    <HeaderComponent title="保证金计算器" class="w-100" style="width: 10%"></HeaderComponent>
    <view class="mt-3 mx-3 text-center" style="font-size: 0.8rem">保证金比例不尽相同，更多详情请咨询</view>
    <view class="mx-3 d-flex justify-content-center align-items-center">
      <CustomerService0></CustomerService0>
    </view>
    <view class="mt-5 mx-3">
      <form>
        <view class="mt-1 p-1 d-flex justify-content-between border">
          <view class="itemTitle">合约品种</view>
          <input placeholder="如 坦纹钢" v-model="name" type="text" class="inputStyle text-start">
        </view>
        <view class="mt-1 p-1 d-flex justify-content-between border">
          <view class="itemTitle">合约乘数</view>
          <view class="d-flex">
            <input placeholder="5" type="number" v-model="number" class="inputStyle">
            <text class="dan">吨/手</text>
          </view>
        </view>
        <view class="mt-1 p-1 d-flex justify-content-between border">
          <view class="itemTitle">行情价格</view>
          <view class="d-flex">
            <input placeholder="23400" v-model="price" class="inputStyle" disabled>
            <text class="dan">元/吨</text>
          </view>
        </view>
        <view class="mt-1 p-1 d-flex justify-content-between border">
          <view class="itemTitle">保证金比例</view>
          <view class="d-flex">
            <input placeholder="15" v-model="percent" class="inputStyle" disabled>
            <text class="dan">%</text>
          </view>
        </view>
        <view class="d-flex justify-content-between mt-3">
          <button class="col-5 fw-bold py-1" style="background-color: #e4e4e4;color: #747474" @click="formReset">
            重置
          </button>
          <button class="col-5 fw-bold py-1" style="background-color: #ff6600; color: white" @click="formSubmit">
            计算
          </button>
        </view>
      </form>
    </view>

    <view class="mx-3 d-flex justify-content-between border mt-4">
      <text class="fw-bold">所需保证金</text>
      <text class="">{{ money }}</text>
      <text>元/手</text>
    </view>
    <view class="mt-1 mx-3 d-flex justify-content-end text-secondary" style="font-size: 0.9rem">
      数据裁止时日: 2024.10.11
    </view>
    <view class="mt-4 mx-3" style="font-size: 0.9rem">
      <text style="color: #ff6702;">
        温馨楞示:
      </text>
      进议轻仓损作，期货总权益至少为保证金金额的2倍。保证金比例会根搓交易所规定随时调整，以上测算数据仅供参考，实际数额以成友记录/保证金临控中心记景/算单数活为准。
    </view>
  </view>
</template>
<script>
import HeaderComponent from "../../common/HeaderComponent.vue";
import CustomerService0 from "../../common/CustomerService0.vue";
import StatusBar from "../../common/StatusBar.vue";

export default {
  data() {
    return {
      name: "",
      number: 5,
      price: 23400,
      percent: 15,
      money: 5 * 23400 * 0.15,
    }
  },
  components: {
    StatusBar,
    CustomerService0,
    HeaderComponent
  },
  methods: {
    formSubmit() {
      this.money = this.number * this.price * (this.percent * 0.01)
    },
    formReset() {
      this.money = "";
      this.number = "";
      this.percent = "";
      this.name = "";
      this.price = "";
    },
  },
}
</script>

<style>
.border {
  border: #e1e1e1 1px solid;
}

.itemTitle {
  width: 8rem;
  font-size: 1rem;
  color: #979797;
  flex-shrink: 0;
}

.inputStyle {
  margin-left: 1rem;
  font-size: 1rem;
  color: black;
  flex-grow: 1;
}

.dan {
  width: 4rem;
  font-size: 1rem;
  color: black;
}
</style>
